<template>
  <div class="operation-pbx__wrapper">
    <div class="operation-pbx__operation" :title='currentPBX'>
      <el-select v-model="currentPBX" placeholder="请选择" class='pbx-select' @change='pbxSelectChange' v-show = 'isShowSelect'>
        <el-option
          v-for="item in pbxList"
          :key="item.PBX"
          :label="filtersPbxName(item)"
          :value="item.PBX">
          <span >{{item.NickName}} ({{item.PBX}})</span>
        </el-option>
      </el-select>
      <el-button class='pbx-button pbx-add' @click = 'pbxAdd' v-show = 'isAdmin'>
        添加PBX
      </el-button>
      <el-button class='pbx-button' @click = 'deletePBX' v-show = 'isShowDeleteBtn && isAdmin'>
        删除PBX
      </el-button>
      <el-button class='pbx-button' @click = 'migrationPBX' v-show = 'isAdmin'>
        迁移PBX
      </el-button>
    </div>
    <div class="operation-pbx__pbxinfo">
       <div class='pbxinfo-text'>
         {{accountId}} - {{pbxNickName}} - {{currentPBX}}
       </div>
       <div :class='["pbxinfo-type", currentState.type]' >
         {{currentState.title}}
       </div>
    </div>
    <left-slide :visible.sync='slideLeft' :title='currentSlideView?slideViewConfig[currentSlideView].title: ""' :showFooter='false' @close = 'slideLeftClose'>
      <component :is="currentSlideView" :pbxNickName = 'pbxNickName' :currentPBX = 'currentPBX' @taskComplete = 'hideSlide'></component>
    </left-slide>
  </div>
</template>
<script>
  import addPBX from './pbxAdd.vue'
  import deletePBX from './deletePBX.vue'
  import migrationPBX from './migrationPBX.vue'
  import leftSlide from '@/components/ui-modules/newConfig/leftSlide.vue'
  import { deepClone } from '@/utils/m7Utils.js'
  export default {
    name: 'operationPBX',
    data () {
      return {
        visible: true,
        currentPBX: '',
        slideLeft: false,
        pbxNickName: '',
        currentState: {
          title: '',
          type: ''
        },
        currentSlideView: 'addPBX',
        slideViewConfig: {
          addPBX: {
            title: 'PBX添加',
            component: 'addPBX'
          },
          deletePBX: {
            title: 'PBX删除',
            component: 'deletePBX'
          },
          migrationPBX: {
            title: 'PBX迁移',
            component: 'migrationPBX'
          }
        }
      }
    },
    watch: {
      visible (val) {
        if (val) {
          this.closed = false
          this.$emit('open')
        } else {
          if (!this.closed) this.$emit('close')
        }
      },
      pbxList (newList) {
        let newArr = newList
        let newPbx = newArr[newArr.length - 1].PBX
        this.currentPBX = newPbx
        this.pbxSelectChange(newPbx)
      }
    },
    computed: {
      pbxList () {
        return deepClone(this.$store.state.session.account.pbx)
      },
      isShowDeleteBtn () {
        if (this.pbxList && this.pbxList.length > 0) {
          return true
        } else {
          return false
        }
      },
      isShowSelect () {
        if (this.pbxList && this.pbxList.length > 0) {
          return true
        } else {
          return false
        }
      },
      accountId () {
        return this.$store.state.session.account.account
      },
      isAdmin () {
        return this.$store.state.session.user.isAdmin
      }
    },
    methods: {
      pbxSelectChange (newpbx) {
        this.getPBXState()
        this.pbxList.find((item) => {
          if (item.PBX === newpbx) {
            this.pbxNickName = item.NickName
          }
        })
        this.getAllNodesByPbxForSkill().then((pbx) => {
          this.setCurrentPBX(newpbx)
        })
      },
      getPBXState () {
        let currentPBX = this.currentPBX
        this.$store.dispatch('checkPbxLoadInfo', {'pbxId': currentPBX}).then((state) => {
          this.currentState = state
        })
      },
      filtersPbxName (pbxObj) {
        return '当前PBX: ' + pbxObj.NickName + '(' + pbxObj.PBX + ')'
      },
      pbxAdd () {
        this.currentSlideView = 'addPBX'
        this.slideLeft = true
      },
      deletePBX () {
        this.currentSlideView = 'deletePBX'
        this.slideLeft = true
      },
      migrationPBX () {
        this.currentSlideView = 'migrationPBX'
        this.slideLeft = true
      },
      setCurrentPBX (currentPBX) {
        this.$store.commit('SET_CURRENTPBX', currentPBX)
        this.$store.dispatch('getNewFeatures', currentPBX)
      },
      getAllNodesByPbxForSkill () {
        let currentPBX = this.currentPBX
        return new Promise((resolve, reject) => {
          // if (this.$store.state.session.ivrMap && this.$store.state.session.ivrMap[currentPBX]) {
          //   resolve(currentPBX)
          // } else {
          let data = {}
          this.$emit('isLoading', true)
          data.Account = this.accountId
          data.PBX = currentPBX
          this.$store.dispatch('getAllNodesByPbxForSkill', data).then(res => {
            this.$emit('isLoading', false)
            resolve(currentPBX)
          })
          // }
        })
      },
      slideLeftClose () {
        this.currentSlideView = ''
      },
      hideSlide () {
        this.slideLeft = false
      }
    },
    mounted () {
      if (this.pbxList && this.pbxList.length > 0) {
        let currentPBX = this.pbxList[0].PBX
        this.pbxNickName = this.pbxList[0].NickName
        this.currentPBX = currentPBX
        this.getPBXState()
        // let account = this.$store.state.session.account.account
        // this.accountId = account
        this.getAllNodesByPbxForSkill().then((pbx) => {
          this.setCurrentPBX(currentPBX)
          this.$emit('initialize', true)
        })
      } else {
        this.$emit('initialize', false)
      }
    },
    components: {
      leftSlide,
      addPBX,
      deletePBX,
      migrationPBX
    }
  }
</script>
<style lang="stylus">
  .operation-pbx__wrapper
    background: rgba(240,242,243,1)
    box-shadow: 0px 1px 0px 0px rgba(224,224,224,1)
    padding: 0px 20px 0px
    display: flex
    height: 48px
    flex-direction: row
    justify-content: space-between
    align-items: center
    .pbx-select
      width: 220px
      margin-right: 20px
      .el-input__inner
        height: 24px
      .el-input__inner
        border-radius: 3px
        border: 1px solid rgba(204,204,204,1)
        padding: 1px 25px 1px 8px
        font-size: 12px
        box-sizing: border-box
      .el-input__suffix
        padding-right 0px
      .el-select__caret
        line-height 16px
    .pbx-button
      padding: 4px 10px 4px
      color: white
      background: #FF6B6B
      border-color: #FF6B6B
    .pbx-add
      background: #459AE9
      border-color: #459AE9
    .operation-pbx__pbxinfo
      font-size: 14px
      height: 100%
      display: flex
      flex-direction: row
      align-items: center
      font-size: 14px
      .pbxinfo-text
        color: #424242
        margin-right: 10px
      .pbxinfo-type
        color: white
        padding: 0px 4px 0px
        background #A5A5A5
      .success
        background #41B27F
      .warning
        background #FF9202
      .important
        background #FF6B6B
      .inverse
        background #A5A5A5
</style>
